<template>
    <view>
        <scroll-view scroll-y class="page">
            <cu-custom :bgColor="bgColor" :isBack="true">
                <block slot="backText"></block>
                <block slot="content">派工条码报工</block>
                <view slot="right" @tap="saveData">提交</view>
            </cu-custom>
            <view class="header">
                <view class="input-view">
                    <uni-icon type="search" size="22" color="#ffffff"></uni-icon>
                    <view class='cuIcon-search'></view>
                    <input v-model="searchText" confirm-type="search" @confirm="onInput" focus="true" class="input"
                           type="text" autofocus="autofocus"
                           placeholder="扫描或输入条码"/>
                    <!-- <input v-model="searchText" @input="onInput" focus="true" class="input" type="text" placeholder="扫描或输入条码" /> -->
                    <view class='cuIcon-scan' @tap="scanCode" style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
                </view>
            </view>

            <view class="cu-form-group" style="margin-bottom: 10upx;" @click="goPerationList()">
                <view class="title">
                    <text>工序:</text>
                    <text style="margin-left: 450rpx;" v-if="order.id==null">请选择</text>
                    <uni-icons type="right" size="16" v-if="order.id==null"></uni-icons>
                </view>
                <view class="uni-list-cell-db">
                    <view v-if="order.id" :value="indexGongxu" class="picker">
                        {{order.operationName}}
                    </view>
                </view>
            </view>
            <view class="cu-form-group" style="margin-bottom: 10upx;" @click="goBanzuList()">
                <view class="title">
                    <text>班组:</text>
                    <text style="margin-left: 450rpx;" v-if="banzu.id==null">请选择</text>
                    <uni-icons type="right" size="16" v-if="banzu.id==null"></uni-icons>
                </view>
                <view class="uni-list-cell-db">
                    <view v-if="banzu.id" :value="indexBanzu" class="picker">
                        {{banzu.banzuName}}
                    </view>
                </view>
            </view>

            <form @submit="formSubmit" @reset="formReset">
                <view class="cu-card dynamic" v-for="(item,index) in dcPreceWorkReportItemList" :key="index">
                    <view class="cu-item shadow" :style="{'background-color':color===1?'#3bade3':'#f37b1d'}">
                        <view class="text-content2">
                            <view style="width: 80%;margin-left: 25rpx;">条码：&nbsp;&nbsp;&nbsp;&nbsp;{{item.barcode}}</view>
                            <view @tap.stop="delItem(index)" style="width: 20%;text-align: center;"><image style="width: 40rpx;height: 40rpx;" src="../../static/icon/del.png" mode="widthFix" @tap="dropDown"></image></view>
                        </view>
                        <view class="text-content">
                            生产指令单： {{item.aufnr==null?'':item.aufnr}}
                        </view>
                        <view class="text-content">
                            物料编码： {{item.matnr==null?'':item.matnr}}
                        </view>
                        <view class="text-content">
                            物料名称： {{item.maktx==null?'':item.maktx}}
                        </view>
                        <view class="text-content">
                            颜色尺码：{{item.colorName==null?'':item.colorName}} {{item.size==null?'':item.size}}
                        </view>
                        <view class="text-content">
                            <view class="num">合格数：</view>
                            <input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.gmnga"
                                   name="gmnga"/>
                        </view>
                        <view class="text-content">
                            <view class="num">不合格数：</view>
                            <input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.xmnga"
                                   name="xmnga"/>
                        </view>
                    </view>
                </view>
            </form>
        </scroll-view>
    </view>
</template>
<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import api from '@/api/api.js'
	import {scanMixin} from "../../common/scanMixin.js"

    export default {
		mixins: [scanMixin],
        computed: {
            ...mapState(['companyCode'])
        },
        data() {
            return {
                backFlag: true,
                title: '下拉刷新 + 加载更多',
                data: [],
                dcPreceWorkReportItemList: [],
                barcodeMap: new Map(),
                chooseList: [],
                array: [],
                index: 0,
                pageNo: 1,
                endFlag: false,
                filter: "",
                loadMoreText: "加载中...",
                showLoadMore: false,
                selFlag: false,
                date: new Date().toISOString().slice(0, 10),
                searchText: "",
                filterText: '',
                code: '',
                imageList: [],
                gongxuPickerList: ['请选择'],
                gongxuList: [],
                indexGongxu: 0,
                indexBanzu: 0,
                senddata: {
                    sampleAndResult: {
                        vornr: "",
                    }
                },
                afs: false,
                color: 0,
                bgColor: 'bg-green',
                showFinish: 'false',
                order: {},
                banzu: {},
                personnelList: []
            };
        },

        // 导航搜索栏监听搜索事件
        onNavigationBarSearchInputConfirmed(e) {
            // 搜索框内容 : e.text
            // console.log(e.text);
        },
        onLoad() {
            let url = '/dcloud/sysPara/sysPara/list'
            let that = this
            this.$http.get(url, {
                params: {
                    para: "confirmationShowFinish",
                }
            }).then(res => {
                if (res.data.success) {
                    this.showFinish = res.data.result.records[0].value
                }
            }).catch(err => {
                console.log(err);
            });
        },
        onShow() {
			this.registerReceiver();
			this.startScan();

            let submitBack = uni.getStorageSync("submitBack")
            if (submitBack) {
                this.dcPreceWorkReportItemList = []
                uni.removeStorageSync('submitBack')
                this.searchText = ''
            }
            if (uni.getStorageSync("industry") == 'afs') {
                this.afs = true
            }
            this.pageNo = 1,
                this.filter = "",
                this.endFlag = false,
                this.loadMoreText = "加载更多",
                this.showLoadMore = false;
            let pages = getCurrentPages();
            if (pages[pages.length - 1].$vm.order.id) {
                // this.schoolName = pages[pages.length - 1].$vm.schoolName
                this.order = pages[pages.length - 1].$vm.order
                this.indexGongxu = this.order;
            }
            if (pages[pages.length - 1].$vm.banzu.id) {
                this.banzu = pages[pages.length - 1].$vm.banzu
                this.indexBanzu = this.banzu;
                this.getBanzuList();
            }
            // this.load();
            // this.getGongxuList();
            // this.searchText.focus;
        },
		onHide() {
			this.stopScan();
		},
        onUnload() {
			this.stopScan();

            this.max = 0,
                // this.data = [],
                this.dcPreceWorkReportItemList = [],
                this.pageNo = 1,
                this.filter = "",
                this.endFlag = false,
                this.loadMoreText = "加载更多",
                this.showLoadMore = false;
        },
        onReachBottom() {
            if (this.endFlag == true) {
                this.loadMoreText = "已显示全部数据"
                return;
            }
            this.showLoadMore = true;
            setTimeout(() => {
                //	this.pageNo = this.pageNo + 1;
                // this.getList()
            }, 300);
        },
        onPullDownRefresh() {
            console.log('onPullDownRefresh');
            this.initData();
        },
        onBackPress() {
            if (this.backFlag) {
                uni.showModal({
                    title: "确定退出编辑？",
                    content: "退出后内容不做保存",
                    success: (res) => {
                        if (res.confirm) {
                            // console.log("确定返回");
                            this.backFlag = false
                            uni.navigateBack({
                                delta: 1, //返回层数，2则上上页
                            })
                            return true
                        } else {
                            this.backFlag = true
                            return true
                        }
                    }
                })
                return true
            } else {
                return false
            }
        },
        methods: {
            beaforeUnLoad(){
                wx.enableAlertBeforeUnload({ //开启页面退出时的对话框
                    message: "当前数据未提交，确定继续退出？",
                    success: function (res) {
                        return true
                    },
                    fail: function (err) {
                        return false
                    },
                });
            },
            getBanzuList() {
                let that = this;
                let url = '/dcloud/confirmation/confirmation/getWorkByBanzu'
                this.$http.get(url, {
                    params: {
                        banzu: this.banzu.banzuCode,
                    },
                }).then(res => {
                    if (res.data.success && res.data.result.length > 0) {
                        that.personnelList = res.data.result
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            onInput(e) {
                let barcode = e.detail.value
                if (barcode.length < 6 || barcode == '') {
                    console.log(barcode.length)
                    return;
                }
                // this.searchText=""
                if (this.indexGongxu == 0) {
                    this.searchText = ""
                    this.$tip.toast('请先选择工序')
                    return;
                }

                if (this.barcodeMap.get(barcode)) {
                    this.searchText = ""
                    this.$tip.toast('条码已扫描')
                    return;
                }
                let that = this;
                let url = '/dcloud/confirmation/confirmation/getDispatchOrderByBarcode'
                this.$http.get(url, {
                    params: {
                        barcode: barcode,
                    },
                }).then(res => {
                    // that.searchText=""
                    if (res.data.success && res.data.result.length > 0) {
                        let item = {
                            barcode: barcode,
                            aufnr: res.data.result[0].aufnr,
                            dispatchNo: res.data.result[0].dispatchNo,
                            vornr: res.data.result[0].vornr,
                            matnr: res.data.result[0].matnr,
                            maktx: res.data.result[0].maktx,
                            color: res.data.result[0].color,
                            colorName: res.data.result[0].colorName,
                            size: res.data.result[0].size,
                            sizeName: res.data.result[0].sizeName,
                            gmnga: res.data.result[0].gmnga,
                            ltxa1: this.order.operationCode,
                            xmnga: '',

                            auart: res.data.result[0].auart,
                            buwei: res.data.result[0].buwei,
                            buweiName: res.data.result[0].buweiName,
                            colorType: null,
                            department: res.data.result[0].department,
                            division: res.data.result[0].division,
                            itemNo: res.data.result[0].itemNo,
                            kdauf: res.data.result[0].kdauf,
                            kdpos: res.data.result[0].kdpos,
                            sgamng: res.data.result[0].sgamng,
                            sizesJson: res.data.result[0].sizesJson,
                            werks: res.data.result[0].werks,
                            werksName: res.data.result[0].werksName,
                            wjMenge: res.data.result[0].wjMenge,
                            xingti: res.data.result[0].xingti,
                            yjMenge: res.data.result[0].yjMenge,

                        }
                        // that.dcPreceWorkReportItemList.push(item)
                        that.dcPreceWorkReportItemList.splice(0, 0, item);
                        this.beaforeUnLoad();
                        this.backFlag = true
                        that.barcodeMap.set(barcode, barcode);
                        if (this.color == 0) {
                            this.color = 1
                            this.bgColor = 'bg-green'
                        } else {
                            this.color = 0
                            this.bgColor = 'bg-orange'
                        }
                        // this.searchText=""
                    } else {
                        this.$tip.toast('条码不存在或已完工')
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            goPerationList() {
                uni.navigateTo({
                    url: '/packageA/mcloud/dcOperationList'
                })
            },
            goBanzuList() {
                uni.navigateTo({
                    url: '/packageA/mcloud/dcBanzuList'
                })
            },
            initData() {
                setTimeout(() => {
                    uni.stopPullDownRefresh();
                }, 300);
            },
            scanCode() {
                let that = this;
                uni.scanCode({
                    success: function (res) {
                        that.searchText = res.result;
                        let e = {};
                        e.detail = {};
                        e.detail.value = res.result;
                        that.onInput(e);
                    }
                });
            },
            delItem(index){
                let list = this.dcPreceWorkReportItemList
                list.splice(index,1)
                this.dcPreceWorkReportItemList = list
                if(this.dcPreceWorkReportItemList.length == 0){
                    this.backFlag = false
                    wx.disableAlertBeforeUnload()
                }
            },
            saveData() {
                if (this.indexGongxu == 0) {
                    this.$tip.alert('请选择工序');
                    return;
                }
                if (this.dcPreceWorkReportItemList.length == 0) {
                    this.$tip.alert('没有扫描数据');
                    return;
                }
                let params = {}

                params.banzu = this.banzu.banzuCode
                params.confType = 3
                params.ltxa1 = this.order.operationCode
                params.dcPreceWorkReportItemList = this.dcPreceWorkReportItemList
                params.personnelList = this.personnelList
                let url = '/dcloud/confirmation/confirmation/scanSubmit'
                this.$http.post(url, params, {
                    emulateJSON: true

                }).then(res => {
                    if (res.data.success) {
                        if (res.statusCode == "200") {
                            uni.showToast({
                                // icon: 'none',
                                title: '保存成功'
                            });
                            this.searchText = ""
                            this.dcPreceWorkReportItemList = []
                            this.personnelList = []
                            this.barcodeMap = new Map()
                            this.backFlag = false
                            wx.disableAlertBeforeUnload()
                        }
                    } else {
                        this.$tip.toast(res.data.message);
                    }
                }).catch(err => {
                    console.log(err);
                });

        }

    }
    }
</script>
<style>
    .header {
        display: flex;
        flex-direction: row;
        padding: 10px 15px;
        align-items: center;
        background-color: #314054;
    }

    .page {
        height: 100Vh;
        width: 100vw;
    }

    .page.show {
        overflow: hidden;
    }


    .switch-sex::after {
        content: "\e716";
    }

    .switch-sex::before {
        content: "\e7a9";
    }

    .switch-music::after {
        content: "\e66a";
    }

    .switch-music::before {
        content: "\e6db";
    }

    .input-view {
        display: flex;
        align-items: center;
        flex-direction: row;
        background-color: #414f61;
        height: 30px;
        border-radius: 15px;
        padding: 0 10px;
        flex: 1;
    }

    .input {
        flex: 1;
        padding: 0 5px;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        color: #FFFFFF;
    }

    .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 10px;
    }

    .cu-card > .cu-item {
        margin-bottom: 5px;
        margin-top: 10px;
    }

    .cu-card.dynamic > .cu-item > .text-content {
        margin-bottom: 1px;
        margin-top: 6px;
    }

    .cu-card.dynamic>.cu-item>.text-content2 {
        display: flex;
        flex-direction: row;
        margin-bottom: 1px;
        margin-top: 6px;
        width: 100%;
        justify-content: left;
        align-items: center;
        margin-left: 6rpx;
    }

    .date {
        height: 260 rpx;
        text-align: center;
        background-color: #0081ff;
        color: #FFFFFF;
        word-break: break-all;
        margin-top: -1px;
    }

    .text {
        margin-top: 10 rpx;
        word-break: break-all;
        color: #FFFFFF;
    }

    .baogong {
        margin-top: 6px;
        margin-botton: 6px;
        text-align: center;
        display: block;
        margin: 0 auto;
    }

    .mini-btn {
        text-align: center;
        border-radius: 15 rpx;
        width: 200 rpx;
        height: 70 rpx;
        background-color: #0081ff;
        color: #FFFFFF;
    }

    button::after {
        border: none;
    }

    .num {
        float: left;
        width: 90px;
    }

    .numinput {
        border-bottom: 1px solid gray;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        text-align: center;
        vertical-align: middle;
    }
</style>
<style lang="scss">
    .uni-input {
        margin-bottom: -10upx;
    }

    .picker {
        text-align: right;
    }

</style>
